<!-- 首页 -->
<template>
	<view class="container">
		<TopNav title="提现"></TopNav>
		<view class="card m-t10 radius flex justify-between align-center" @click="popupShow = true">
			<view class="">
				<view class="f-s14">
					<text>到账方式</text>
				</view>

				<view class="text-black f-s15 m-t12" v-if="accountData.id">
					<text class="f-w600">{{accountData.typeName}}</text>
					<text
						class="p-l8 text-gray f-w400">{{accountData.bankType || ''}}({{ getLastFourChars(accountData.account)}})</text>
				</view>
				<view class="m-t12" v-else>
					<text class="f-s16" style="color:#B2B8C1">请选择到账方式</text>
				</view>
			</view>
			<image src="/static/images/index/more.png" class="width-22 height-22" mode=""></image>
		</view>
		<view class="card m-t10 radius">
			<view class="f-s14">
				<text>提现金额</text>
			</view>
			<view class="flex align-baseline">
				<text class="text-bold f-s21 m-r10">￥</text>
				<u-input placeholder="请输入" v-model="form.money" type="number" border="none" fontSize="64rpx"
					placeholderClass="placeholderClass" :formatter="handleInputFormatter"></u-input>
			</view>
			<view class="m-t14">
				<text class="text-gray f-w400 f-s14">当前可提现金额：</text>
				<text class="f-s14 f-w500">￥{{detailData.balance || 0.00}}</text>
			</view>
		</view>
		<view class="m-t10 hint">
			<text>温馨提示</text>
			<text>1.如不确定银行卡属于类卡还是I类卡，建议选择支付宝提现；</text>
			<text>2.支持大额提现，建议一次性提到银行卡，不用分批提现； </text>
			<text>3.提现到账时间1-3个工作日，如超过3个工作日未到账，请联系官方客服。</text>
		</view>
		<view class="flex justify-center fixed-bottom bg-white">
			<view class="self-btn m-r10" style="background-color: #EBECED;width: 194rpx;" hover-class="pressed"
				@click="handleToPage('detail')">
				<text class="text-black">资金明细</text>
			</view>
			<view class="self-btn" style="width: 488rpx;" hover-class="pressed" @click="handleSubmit">
				<text>立即提现</text>
			</view>
		</view>
		<Popup :show.sync="popupShow" title="请选择到账方式">
			<view class="">
				<view class="radio-item m-t20" :class="{'radio-check':radioCurrent === 0}" @click="radioCurrent = 0">
					<view class="flex align-center">
						<image src="/static/images/index/zhifubao.png" class="width-24 height-24" mode=""></image>
						<text class="m-l12">支付宝</text>
					</view>
					<image src="/static/images/index/radio-check.png" class="width-16 height-16" mode=""
						v-if="radioCurrent === 0"></image>
					<image src="/static/images/index/radio.png" class="width-16 height-16" mode="" v-else></image>
				</view>
				<view class="radio-item m-t10" :class="{'radio-check':radioCurrent === 1}" @click="radioCurrent = 1">
					<view class="flex align-center">
						<image src="/static/images/index/bank.png" class="width-24 height-24" mode=""></image>
						<text class="m-l12">银行卡</text>
					</view>
					<image src="/static/images/index/radio-check.png" class="width-16 height-16" mode=""
						v-if="radioCurrent === 1"></image>
					<image src="/static/images/index/radio.png" class="width-16 height-16" mode="" v-else></image>
				</view>
				<view class="self-btn m-t22 full-width" hover-class="pressed" @click="handlePopupClose">
					<text>确定</text>
				</view>
			</view>
		</Popup>
		<Toast></Toast>
	</view>
</template>

<script>
	import Popup from "@/components/popup/index.vue"
	import {
		withdraw,
		withdrawApply
	} from "@/api/mine/pay.js"
	export default {
		name: "",
		components: {
			Popup
		},
		data() {
			return {
				// 选择账户信息
				accountData: {},
				detailData: {},
				form: {
					money: '',
					receipt_id: ''
				},
				popupShow: false,
				radioCurrent: 0
			}
		},
		onLoad() {
			this.getDetail()
		},
		onUnload() {
			uni.$off('accountSelect', this.handleAccountSelect)
		},
		methods: {
			getLastFourChars(str) {
				try {
					if (typeof str !== 'string' || str.length < 4) {
						return '';
					}
					return str.slice(-4);
				} catch (e) {
					return '-';
				}
			},
			// 选择提现账户
			handleAccountSelect(select = {}) {
				this.accountData = select
				this.form.receipt_id = select.id
			},
			handleSubmit() {
				if (!this.form.receipt_id) {
					this.$toast("请选择到账方式")
					return
				}
				if (this.form.money <= 0) {
					this.$toast("提现金额为0")
					return
				}
				this.$modal.loading("正在提交").then(() => {
					withdrawApply(this.form).then(res => {
						this.form.money = 0
						this.$modal.closeLoading()
						this.$toast(res.msg)
						this.getDetail()
					}).catch(() => this.$modal.closeLoading())
				})

			},
			handleInputFormatter(val) {
				let balance = Number(this.detailData?.balance) || 0
				if (val <= 0) {
					return 0
				} else if (val > balance) {
					this.$toast(`最高可提现${this.detailData.balance}元`)
					return balance
				}
				return val
			},
			getDetail() {
				withdraw().then(res => {
					let {
						data
					} = res
					this.detailData = data
				})
			},
			handleToPage(path) {

				switch (path) {
					case 'detail':
						let page = getCurrentPages()
						// 上一页是资金明细
						if (page[page.length - 2] && page[page.length - 2]['route'].indexOf(
								'/index/capital-statictics') !== -1) {
							this.$tab.navigateBack()
						} else {
							this.$tab.navigateTo("/pages/index/capital-statictics")
						}
						break;
				}
			},
			handlePopupClose() {
				this.popupShow = false
				uni.$on('accountSelect', this.handleAccountSelect)
				if (this.radioCurrent === 0) {
					this.$tab.navigateTo('/pages/index/capital/ali')
				} else if (this.radioCurrent === 1) {
					this.$tab.navigateTo('/pages/index/capital/bank?account=' + this.accountData.account || '')
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/css/var.scss';

	page {
		@include fixed-bottom;
	}

	.pl-3 {
		padding-left: 6rpx;
	}

	.container {
		padding: 0 26rpx;

		.card {
			padding: 32rpx 26rpx;
			background-color: #fff;
		}

		::v-deep .van-field {
			padding: 0 18rpx;
			line-height: normal;
			margin-top: 34rpx;

		}

		.hint {
			display: flex;
			flex-direction: column;
			font-weight: 400;
			font-size: 28rpx;
			color: #909399;
			line-height: 44rpx;
		}

		.radio-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 12rpx;
			border: 2rpx solid #DDE0E6;
			padding: 24rpx;
			box-sizing: border-box;
		}

		.radio-check {
			border-color: #202020;
		}

		::v-deep .placeholderClass {
			font-weight: 400;
			font-size: 64rpx;
			color: #B2B8C1;
			line-height: 90rpx;
		}

		::v-deep .u-input__content__field-wrapper__field {
			line-height: 90rpx;
			height: 90rpx;
		}
	}
</style>